<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      body{
          padding-top: 1.5rem;
      }
      .header{
            width: 93%;
            height: 15rem;
            /*line-height: 2.5rem;*/
            padding: 0.5rem 0.8rem;
            text-align: center;
            background-color: #5177c2;
        }
      .header_img{
        width: 7%;
        height: 9%;

        margin-top: 0.5rem;
      }
      .header_img img{
        width: 100%;
        height: 100%;
      }
    .fl{
      float: left;
    }
    .fr{
      float:right;
    }
    .header_head{
      width: 100%;
      height: 6rem;
      margin-top: 2rem;
    }
    .head_img{
      width: 24%;
      height: 85%;
    }
    .head_img img{
        width: 100%;
        height: 100%;
    }
    .head_na{
      width: 50%;
      height: 40%;
      color: #fff;
      text-align: left;
      margin-left: 1rem;
      padding-top: 0.5rem;
    }
    .num{
      width: 100%;
      height: 1.5rem;
      margin-bottom: 0rem;
      margin-top: 15%;
    }
    .num_img{
      width: 10%;
      height: 65%;
      margin-top: 0.15rem;
    }
    .num_img img{
      width: 100%;
      height: 100%;

    }
    .head_right{
      width: 20%;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      background-color: #fff;
      border-radius: 0.5rem;
      font-size:0.9rem;
      margin-top: 5%;
    }
    .header_bo{
      width: 100%;
      height: 4rem;
      color:#fff;
      margin-top: 1rem;
    }
    .bo_p{
      width: 90%;
      font-size: 0.9rem;
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .bo_img{
      width: 10%;
      height: 45%;
      margin-top: 0.5rem;
    }
    .bo_img img{
      width: 100%;
      height: 100%;
    }
    .main{
      width: 100%;
      overflow: hidden;
    }
    .main_p{
      width: 90%;
      height: 1.5rem;
      line-height: 1.5rem;
      margin: 0.8rem auto;
    }
    .main_all{
      width: 94%;
      margin: 1rem auto;
    }
    .all_one{
      width: 100%;
      height: 6rem;
    }
    .one_left{
      width: 10%;
      margin-top: 0.2rem;
    }
    .one_left p{
      margin-left: 0.15rem;
    }
    .left_img{
      width: 45%;
      height: 5%;
    }
    .left_img img{
      width: 100%;
      height: 100%;
    }
    .one_centers{
      width: 90%;
      height: 5.5rem;
      border-bottom: 1px solid rgb(243,243,243,0.5);
    }
    .one_center{
      width: 70%;
      height: 4.5rem;
    }
    .center_bo{
      width: 100%;
      line-height: 2.3rem;
      margin-top:1rem;
      height: 2rem;
    }
    .center_img{
      width:14%;
      height: 90%;
      /*border-radius: 50%;*/
    }
    .center_img img{
      width: 100%;
      height: 100%;
        border-radius: 50%;
    }
    .one_right{
      width: 28%;
      height:90%;

    }
    .one_right img{
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
    }
    .penDiv{
      width:1rem;
      height:1rem;
      position:fixed;
      right:1rem;
      bottom:5%;
      z-index: 9999;
      border-radius: 50%;
      background: #5177c2;
      padding: 0.9rem;
    }
    .penDiv img{
      width: 90%;

    }
      </style>
  </head>
  <body>
    <div class="header">
      <div class="header_img">
        <img src="../image/a9.png" alt="" onclick="closewin()">
      </div>
      <div class="header_head">
        <div class="head_img fl">
          <img src="../image/u89.png" alt="" id="head_url">
        </div>
        <div class="fl head_na">
          <p id="name"></p>
          <div class="num">
            <p class="fl"><span id="user_num">0</span>成员加入</p>
            <div class="num_img fl">
              <img src="../image/a11.png" alt="">
            </div>
          </div>
        </div>
        <div class="head_right fr" id="jr" onclick="tc()">
          申请加入
        </div>
      </div>
      <div class="header_bo">
        <p class="bo_p fl">小组简介：<span id="title"></span></p>
        <div class="bo_img fl">
          <img src="../image/a11.png" alt="">
        </div>
      </div>
    </div>
    <div class="main">
      <p class="main_p">讨论</p>
      <div class="main_all" id="posting">
        <!-- <div class="all_one">
          <div class="one_left fl">
            <div class="left_img">
              <img src="../image/a35.png" alt="">
            </div>
            <p>38</p>
          </div>
          <div class="one_centers fl">
            <div class="one_center fl">
              <p style="font-size:1.2rem;">来，吸吸小号警犬</p>
              <div class="center_bo">
                <div class="center_img fl">
                  <img src="../image/u89.png" alt="">
                </div>
                <p class="fl" style="margin-left:0.2rem;font-size:0.9rem;">Merecat</p>
                <p class="left" style="margin-left:0.5rem;font-size:1rem;">2019年12月30日</p>
              </div>
            </div>
            <div class="one_right fl">
              <img src="../image/u89.png" alt="">
            </div>
          </div>
        </div> -->

      </div>
    </div>
    <div class="penDiv">
      <img src="../image/pen.png" onclick="ft()">
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript">
      var userinfo = $api.getStorage('userinfo');
      var id
      var state = 1
      var page = 1;
      var pagesize=15
      var ok = true
      apiready = function(){
        id = api.pageParam.id
        get_grouplist()//获取讨论组详情
        get_posting()//获取该讨论组下的帖子
        api.addEventListener({
          name : 'scrolltobottom',
            extra : {
              threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
          }, function(ret, err) {
            get_posting()
            // add_load(0,0)
          });
      };

      function ft() {
        api.openWin({
            name: 'group_ft',
            url: './group_ft.html',
            pageParam: {
                        id: id
                    }
        });
      }
      function opens(id) {
        // alert(id)
          api.openWin({
              name: 'posting',
              url: './posting.html',
              pageParam: {
                          id: id
                      }
          });
      }
      function get_posting() {
        if(ok == false){
          return false
        }
        var html =''
        var obj = $api.byId('posting');

        api.ajax({
            url: SITE_URL+'group_api/posting/index',
            method: 'post',
            data: {
                values: {
                    id: id,
                    page:page,
                    pagesize:pagesize
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                for (var i = 0; i < ret.data.length; i++) {
                  var dat = ret.data[i]
                  html +='<div class="all_one" onclick="opens('+dat.id+')">'
                    html +='<div class="one_left fl">'
                      html +='<div class="left_img">'
                        html +='<img src="../image/a232.png" alt="">'
                      html +='</div>'
                      html +='<p>'+dat.pl+'</p>'
                    html +='</div>'
                    html +='<div class="one_centers fl">'
                      html +='<div class="one_center fl">'
                        html +='<p style="font-size:1.2rem;">'+cutstr(dat.content,20)+'</p>'
                        html +='<div class="center_bo">'
                          html +='<div class="center_img fl">'
                            html +='<img src="'+dat.head_img+'" alt="">'
                          html +='</div>'
                          html +='<p class="fl" style="width:30%;margin-left:0.2rem;font-size:0.85rem;line-height:0.85rem;margin-top:0.75rem;">'+cutstr(dat.nick_name,10)+'</p>'
                          html +='<p class="left" style="margin-left:0.5rem;font-size:0.9rem;">'+dat.add_time+'</p>'
                        html +='</div>'
                      html +='</div>'
                      html +='<div class="one_right fl">'
                        html +='<img src="'+dat.img+'" alt="">'
                      html +='</div>'
                    html +='</div>'
                  html +='</div>'

                }
                $api.append(obj, html);
                page+=1

              }else{
                ok = false
                msgcode('快来发言吧')
              }
              //  alert( JSON.stringify( ret ) );
            } else {
              //  alert( JSON.stringify( err ) );
            }
        });

      }

      function tc() {
        api.ajax({
            url: SITE_URL+'group_api/index/out_group',
            method: 'post',
            data: {
                values: {
                    user_id: userinfo.id,
                    id:id
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                api.sendEvent({
                    name: 'group_out',
                    extra: {
                        id: id,

                    }
                });

                msgcode('退出成功')
                setTimeout(function () {
                  api.closeWin({

                  });

                },500)
              }else{
                msgcode('稍后再试')
              }
              //  alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
                //alert( JSON.stringify( err ) );
            }
        });

      }

      function get_grouplist() {
        api.ajax({
            url: SITE_URL+'group_api/index/get_grouplist',
            method: 'post',
            data: {
                values: {
                    id: id,
                    user_id:userinfo.id

                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==250){
                msgcode('该讨论群组已关闭')
                api.closeWin({

                });

              }else if(ret.error==200){
                $("#name").html(ret.data.name)
                $("#title").html(ret.data.title)
                $("#user_num").html(ret.data.user_num)
                $("#head_url").attr('src',ret.data.head_url)
                state = ret.data.state
                if(ret.data.state==1){//已加入
                  $("#jr").html('申请退出')
                }else{//未加入
                  $("#jr").html('申请加入')
                }
              }else{
                msgcode('获取基础信息失败')
              }
                //alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
                //alert( JSON.stringify( err ) );
            }
        });

      }
  </script>
  </html>
